{extend name='template/base'}{/extend}
{block name='title'}{/block}
{block name='style'}
<style>
    .biaoshi{
        position: relative;
    }
    .biaoshi.tip:after{
        content: attr(data-num);
        position: absolute;
        top:-8px;
        right:-8px;
        width:20px;
        height:20px;
        border-radius:50%;
        background: red;
        text-align: center;
        line-height:20px;
        font-size:12px;
        color: #fff;

    }
</style>
{/block}
{block name='script'}{/block}
{block name='content'}
<script src="__STATIC__/app/plugin/common_fun.js"></script>
<header class="header">
    <div class="seach">
        <input type="text" id="word" placeholder="搜索商家名称">
    </div>
</header>
<div class="pages">
    <!-- Swiper -->
    <div id="refreshContainer" class="mui-scroll-wrapper" style="padding-bottom: 95px;">
        <div class="mui-scroll" style="padding-bottom: 20px;">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a ><img src="../../../../public/wechat/static/image/1.jpg"/></a>
                    </div>
                    <!--<div class="swiper-slide">-->
                        <!--<a><img src="../../../../public/wechat/static/image/2.jpg"/></a>-->
                    <!--</div>-->
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
            <div class="shop-list">
                <h4 class="title">推荐商家</h4>
                <ul id="data_ul">
                    <template v-for="item in items">
                        <li v-for="vo in item">
                            <a @tap="detailbtn(vo.id,vo.distance)">
                                <div  :class="[vo.count? 'img biaoshi tip':'img biaoshi','img biaoshi']"   :data-num="vo.count"><img :src="vo.logo"/></div>
                                <div class="text">
                                    <div class="title">
                                        {{vo.name}}
                                    </div>
                                    <div>
                                        <p class="ellipsis font12">{{vo.shop_address}}</p>
                                        <p  class="font12">
                                          营业时间： <span class="color-primary">{{vo.bizhours_start}}</span> 至<span class="color-primary">{{vo.bizhours_end}}</span>
                                            <!--<span v-if="(vo.distance>0)" class="pull-right">{{vo.distance}}km</span>-->
                                        </p>
                                    </div>
                                    <div v-if="(vo.is_work==0)" style="width: 111px;">
                                        <p class="ellipsis font12" style="background-color: grey;color: white;padding: 1px;">商家休息，停止接单</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
    </div>
</div>


{/block}
{block name='script_extra'}
<script>
    var list_url = "{:url('shop/Shop/get_list')}";
    var goods_url = "{:url('shop/Goods/index')}";
    var save_point_url = "{:url('user/Index/save_point')}";
    require(['shop/index']);

//        $(document.body).on('touchstart', function (event) {
//            alert(1);
//        });

//    var overscroll = function(el){
//        el.addEventListener('touchstart', function(){
//          //  alert(2);
//            var top = el.scrollTop;
//            var totalScroll = el.scrollHeight;
//            var currentScroll = top + el.offsetHeight;
//            if(top === 0) {
//                el.scrollTop = 1;
//            }else if(currentScroll === totalScroll){
//                el.scrollTop = top - 1;
//            }
//        });
//        el.addEventListener('touchmove', function(evt){
//            if(el.offsetHeight < el.scrollHeight){
//                evt._isScroller = true;
//            }
//        });
//    }
//    overscroll(document.querySelector('.mui-scroll'));//哪里需要可以局部滚动，添加一个“scroll”的class
//    $(document.body).on('touchmove', function (evt) {
//        if(!evt._isScroller){
//            evt.preventDefault();
//        }
//    });

//    document.body.addEventListener('touchmove', function(evt) {
//        alert(1);
//        if(!evt._isScroller){
//            evt.preventDefault();
//        }
//    });
//    document.addEventListener("touchmove",function(e){
//        var p=e.touches[0];
//        //alert(p.clientX);
//       // coords.value="("+p.clientX+","+p.clientY+")";
//    });
//    document.addEventListener("touchstart",function(e){
//        /^(?:INPUT|TEXTAREA|A)$/.test(e.target.tagName)||e.preventDefault();
//    });
</script>
{/block}